<template>
  <el-dialog title="新增品牌" :visible.sync="dialogFormVisible">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="brand_name">
        <el-input v-model="form.brand_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="授权码前序" :label-width="formLabelWidth" prop="brand_first_code_num">
        <el-input v-model="form.brand_first_code_num" autocomplete="off" />
      </el-form-item>
      <el-form-item label="授权期限" :label-width="formLabelWidth" prop="brand_yes_time">
        <el-input v-model="form.brand_yes_time" autocomplete="off" type="number" />
      </el-form-item>
      <el-form-item label="授权书模板" :label-width="formLabelWidth" prop="approval_img">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl + '/oss_upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.approval_img" :src="form.approval_img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item v-if="operationType === '1'" label="品牌后台登录" :label-width="formLabelWidth" prop="brand_login_name">
        <el-input v-model="form.brand_login_name" autocomplete="off" />
      </el-form-item>
      <el-form-item v-if="operationType === '1'" label="后台登录密码" :label-width="formLabelWidth" prop="brand_login_pass_word">
        <el-input v-model="form.brand_login_pass_word" autocomplete="off" />
      </el-form-item>
      <el-form-item label="淘宝授权书模板" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl + '/oss_upload'"
          :show-file-list="false"
          :on-success="handleTbAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.tb_approval_img" :src="form.tb_approval_img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitBtn('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { operationBrand } from '@/api/brand'
export default {
  props: {
    operationType: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API,
      dialogFormVisible: false,
      formLabelWidth: '130px',
      form: {
        brand_name: '',
        brand_first_code_num: '',
        brand_yes_time: '',
        // rules: '',
        // buhao: '',
        // startNum: ''
        brand_login_name: '',
        approval_img: '',
        tb_approval_img: '',
        brand_login_pass_word: ''
      },
      imageUrl: '',
      rules: {
        brand_name: [
          { required: true, message: '请输入品牌名', trigger: 'blur' }
        ],
        brand_login_name: [
          { required: true, message: '请输入品牌后台登录账号', trigger: 'blur' }
        ],
        brand_first_code_num: [
          { required: true, message: '请输入授权码前序', trigger: 'blur' }
        ],
        brand_yes_time: [
          { required: true, message: '请输入授权期限', trigger: 'blur' }
        ],
        approval_img: [
          { required: true, message: '请选择授权规则', trigger: 'change' }
        ],
        brand_login_pass_word: [
          { required: true, message: '请输入后台登录密码', trigger: 'blur' }
        ]
        // startNum: [
        //   { required: true, message: '请输入流水号开始值', trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    submitBtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit')
          let data = {}
          if (this.operationType === '1') {
            const pro = {
              brand_name: this.form.brand_name,
              brand_first_code_num: this.form.brand_first_code_num,
              brand_yes_time: this.form.brand_yes_time,
              approval_img: this.form.approval_img,
              tb_approval_img: this.form.tb_approval_img
            }
            const pro_one = {
              brand_login_name: this.form.brand_login_name,
              brand_login_pass_word: this.form.brand_login_pass_word,
              roles: ['brand_admin'],
              status: '1'
            }
            data = {
              type: this.operationType,
              pro: pro,
              pro_one: pro_one
            }
          } else if (this.operationType === '2') {
            const pro = {
              brand_name: this.form.brand_name,
              brand_first_code_num: this.form.brand_first_code_num,
              brand_yes_time: this.form.brand_yes_time,
              approval_img: this.form.approval_img,
              id: this.form.id,
              tb_approval_img: this.form.tb_approval_img
            }
            data = {
              type: this.operationType,
              pro: pro
            }
          }
          console.log(data)
          this.operationBrand(data)
        } else {
          console.log('err')
        }
      })
    },
    operationBrand(data) {
      // console.log('submit function')
      operationBrand(data).then(res => {
        console.log(res)
        if (res.code === 200) {
          console.log('submit success')
          this.dialogFormVisible = false
          this.$message.success('信息提交成功！')
          this.$emit('reloadFun')
          this.form = {
            brand_name: '',
            brand_first_code_num: '',
            brand_yes_time: '',
            // rules: '',
            // buhao: '',
            // startNum: ''
            brand_login_name: '',
            approval_img: '',
            brand_login_pass_word: ''
          }
        }
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(res, file)
      this.form.approval_img = res
    },
    handleTbAvatarSuccess(res, file) {
      this.form.tb_approval_img = res
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    }
  }

}
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
